<template>
  <div class="cas">
    <!-- 参数说明：
         parentIsClear: boolean 是否有清空按钮 不传的话默认不显示
         lists:级联选择器数据
          格式为[{
          name: '粤菜',
          children: [{
            name: '清蒸桂花鱼',
            children: [{ name: '双流区' }, { name: '武侯区' }]
          }, {
            name: '梅菜扣肉',
            children: [{ name: 'aaa区' }, { name: 'bbb区' }]
          }]
        }]
        placeholedr: placeholedr文字
        show_all_levels： boolean 是否显示三级内容 不传的话默认只显示一级
        @change 事件 可以获取当前选中的节点 回调函数是由一级二级三级组成的节点数组
        @cascadeMsg 事件 可以获取当前级联选择器文本框中的文字， 若 show_all_levels 为 true 显示全部三级的内容 为 false 只显示最后一级的内容
     -->
    <Cascade
      :lists="lists"
      :parentIsClear="false"
      placeholedr="请选择城市"
      :show_all_levels="false"
      @change="getChangeArr"
      @cascadeMsg="getCascadeMsg"
    />
  </div>
</template>

<script>
import Cascade from '@/components/Cascade'
// import citydata from '@/components/citydata'
export default {
  components: {
    Cascade
  },
  data () {
    return {
      lists: [{
        name: '粤菜',
        children: [{
          name: '清蒸桂花鱼',
          children: [{ name: '双流区' }, { name: '武侯区' }]
        }, {
          name: '梅菜扣肉',
          children: [{ name: 'aaa区' }, { name: 'bbb区' }]
        }]
      }, {
        name: '湘菜',
        children: [{
          name: '小炒肉'
        }, {
          name: '剁椒鱼头'
        }, {
          name: '水煮鱼'
        }]
      }, {
        name: '甜品',
        children: [{
          name: '西米露'
        }, {
          name: '双皮奶'
        }, {
          name: '凉粉'
        }]
      }, {
        name: '粤菜',
        children: [{
          name: '清蒸桂花鱼',
          children: [{ name: '双流区' }, { name: '武侯区' }]
        }, {
          name: '梅菜扣肉',
          children: [{ name: 'aaa区' }, { name: 'bbb区' }]
        }]
      }, {
        name: '湘菜',
        children: [{
          name: '小炒肉'
        }, {
          name: '剁椒鱼头'
        }, {
          name: '水煮鱼'
        }]
      }, {
        name: '甜品',
        children: [{
          name: '西米露'
        }, {
          name: '双皮奶'
        }, {
          name: '凉粉'
        }]
      }, {
        name: '粤菜',
        children: [{
          name: '清蒸桂花鱼',
          children: [{ name: '双流区' }, { name: '武侯区' }]
        }, {
          name: '梅菜扣肉',
          children: [{ name: 'aaa区' }, { name: 'bbb区' }]
        }]
      }, {
        name: '湘菜',
        children: [{
          name: '小炒肉'
        }, {
          name: '剁椒鱼头'
        }, {
          name: '水煮鱼'
        }]
      }, {
        name: '甜品',
        children: [{
          name: '西米露'
        }, {
          name: '双皮奶'
        }, {
          name: '凉粉'
        }]
      }, {
        name: '粤菜',
        children: [{
          name: '清蒸桂花鱼',
          children: [{ name: '双流区' }, { name: '武侯区' }]
        }, {
          name: '梅菜扣肉',
          children: [{ name: 'aaa区' }, { name: 'bbb区' }]
        }]
      }, {
        name: '湘菜',
        children: [{
          name: '小炒肉'
        }, {
          name: '剁椒鱼头'
        }, {
          name: '水煮鱼'
        }]
      }, {
        name: '甜品',
        children: [{
          name: '西米露'
        }, {
          name: '双皮奶'
        }, {
          name: '凉粉'
        }]
      }]
      // citydata
    }
  },
  methods: {
    // 获取当前选中节点的索引数组 回调参数为：当选中节点的 index 组成数组
    getChangeArr (arr) {
      console.log(arr, '父组件中获取到子组件的值')
    },
    // 获取当前级联选择器中的文本值 回调参数为：当前级联选择器中的文本值
    getCascadeMsg (text) {
      console.log(text, '父组件中获取到子组件的值')
    }
  }
}
</script>

<style lang="scss" scoped>
.cas {
  margin-top: 20px;
}
</style>
